<template>
  <div class="main">
    <div class="front">
      <div>
        <n-skeleton height="10vh" width="15vw" round></n-skeleton>
      </div>
      <div class="title">
        <n-row justify="center">
          <span class="big-title">学术成果分享平台</span>
        </n-row>
        <n-row justify="center">
          <span class="sub-title">分享知识，分享快乐</span>
        </n-row>
      </div>
      <n-input-group style="padding: 0 20vw">
        <n-select style="width: 10%"></n-select>
        <n-input style="width: 40%" autofocus @keyup.enter="normalSearch">
          <template #suffix>
            <n-icon>
              <search />
            </n-icon>
          </template>
        </n-input>
        <n-button style="width: 7%" text @click="proSearch"> 高级搜索</n-button>
      </n-input-group>
    </div>
    <div class="grid">
      <div class="div1">div1</div>
      <div class="div2">div2</div>
      <div class="div3">div3</div>
      <div class="div4">div3</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { Search } from '@vicons/ionicons5';
const router = useRouter();
const normalSearch = () => {
  router.push('/result');
};
const proSearch = () => {};
</script>

<style scoped lang="scss">
.main {
  > div {
    padding: 2vh 5vw;
  }
  .front {
    background-color: #91a8d0;
    padding-bottom: 4vh;
  }
}
.title {
  margin-top: 8vh;
  margin-bottom: 6vh;
  color: white;
  .big-title {
    font-size: 40px;
    margin: 0 auto;
  }
  .sub-title {
    font-size: 20px;
    margin: 0 auto;
  }
}
.grid {
  // padding: 1vh 1vw;
  margin-top: 6vh;
  background: #fff;
  height: 500px;
  display: grid;
  grid-template-columns: 2fr 3fr 2fr;
  grid-template-rows: repeat(2, 1fr);
  grid-column-gap: 3vw;
  grid-row-gap: 40px;
  div {
    border: 2px solid #91a8d0;
    border-radius: 15px;
  }
  .div1 {
    grid-area: 1 / 1 / 2 / 2;
  }
  .div2 {
    grid-area: 2 / 1 / 3 / 2;
  }
  .div3 {
    grid-area: 1 / 2 / 3 / 3;
  }
  .div4 {
    grid-area: 1 / 3 / 3 / 4;
  }
}
</style>
